<template>
    <div class="emoji-picker">
        <el-popover :trigger="props.trigger" placement="bottom" :width="props.width">
            <div class="emoji-list">
                <div 
                  v-for="(emoji, key) in emojiList[currIndex].emojis" 
                  :key="key" 
                  class="emoji-list-item"
                  @mousedown.prevent
                  @mouseup.stop="insertEmoji(emoji)"
                >
                    {{ emoji }}
                </div>
            </div>
            <template #reference>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" @mousedown.prevent
                    xmlns="http://www.w3.org/2000/svg" style=" cursor: pointer">
                    <rect x="4" y="4" width="16" height="16" rx="8" stroke="#292B2F" stroke-width="2"></rect>
                    <rect x="8.3999" y="9.2998" width="1.8" height="3.6" rx="0.5" fill="#292B2F"></rect>
                    <rect x="13.7998" y="9.2998" width="1.8" height="3.6" rx="0.5" fill="#292B2F"></rect>
                </svg>
            </template>
        </el-popover>
    </div>
</template>

<script setup>
import emojiList from '@/assets/emoji/emoji';
import { ref } from 'vue';

const emit = defineEmits(['emoji-selected']) // 新增事件派发

const props = defineProps({
    trigger: {
        type: String,
        default: 'hover'
    },
    width: {
        type: String,
        default: '500px'
    }
})

const currIndex = ref(0)

// 新增插入表情方法
const insertEmoji = (emoji) => {
    emit('emoji-selected', emoji) // 派发表情选择事件
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/emoji.scss';
</style>